/**
 * @description: 用户登入
 * @author: blue
 */

import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Layout, Body, GroupInput, Button }  from '../../../components/components';
import { dominantfontSize, dominantHue, groupSpacing } from '../../../config/style_variable.js';
import { LANG, i18n } from '../../../config/config';

export default class SingUp extends Component {
  static navigationOptions = {
    title: '注册',
    header: {
      style: {
        height: 40,
        backgroundColor: dominantHue
      },
      titleStyle: {
        color: '#fff'
      }
    }
  };


  constructor(props) {
    super(props);
    this.state = {
      phoneNumber: '',
      tokenNumber: '',
      newPassword: '',
      againPassword: ''
    };
    this.resetPasswordClick = this.resetPasswordClick.bind(this);
  }

  resetPasswordClick() {

    alert(1);
  }

  render() {
    return (
      <Layout>
        <Body spacing={true} style={{flexDirection: 'column',justifyContent: 'center'}}>
          <View>
            <GroupInput icon={<Icon name="user" size={20} color={dominantHue} />}>
              <TextInput
                placeholder='请输入姓名'
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.setState({againPassword: value})}
                />
            </GroupInput>

            <GroupInput icon={<Icon name="mobile" size={30} color={dominantHue} />}>
              <TextInput
                placeholder='请输入手机号'
                keyboardType="numeric"
                maxLength={11}
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.setState({againPassword: value})}
              />
            </GroupInput>

            <GroupInput icon={<Icon name="envelope" size={17} color={dominantHue} />} rightButton={
              <TouchableOpacity activeOpacity={0.7} onPress={() => {alert(1)}}>
                <Text style={{backgroundColor: dominantHue, padding: 5, paddingLeft: 13, paddingRight: 13, borderRadius: 25, color: '#fff', fontSize: dominantfontSize-5}}>验证码</Text>
              </TouchableOpacity>
            }>
              <TextInput
                placeholder='请输入验证码'
                underlineColorAndroid="transparent"
                keyboardType="numeric"
                maxLength={4}
                multiline={true}
                onChangeText={(value) => this.setState({againPassword: value})}
              />
            </GroupInput>

            <GroupInput icon={<Icon name="lock" size={20} color={dominantHue} />}>
              <TextInput
                placeholder='请输入密码'
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.setState({againPassword: value})}
              />
            </GroupInput>

            <GroupInput icon={<Icon name="lock" size={20} color={dominantHue} />}>
              <TextInput
                placeholder='请重复密码'
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.setState({againPassword: value})}
              />
            </GroupInput>

            <View style={{paddingTop: 20}}>
              <Button>注册</Button>
            </View>

            <View style={{flexDirection: 'row', justifyContent: 'center'}}>
              <Text style={{fontSize: dominantfontSize-5, textAlign: 'center', paddingTop: 10}}>点击注册即视为同意 </Text>
              <TouchableOpacity activeOpacity={0.7} onPress={()=>{alert(1)}}>
                <Text style={{fontSize: dominantfontSize-5, textAlign: 'center', paddingTop: 10, color: dominantHue}}>《xxx服务协议》</Text>
              </TouchableOpacity>
            </View>

          </View>
        </Body>
      </Layout>
    );
  }
}

let styles =  StyleSheet.create({
  input: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: '#ddd',
    marginBottom: 10,
  }
})
